<template>
  <span v-if="query.mediatype == 'liveroom'">
    <live-room-media :query="query" @handleVideoPlay="handleVideoPlay" />
  </span>
  <span v-else>
    <!-- 节目集开始 -->
    <media-info :query="query" @handleVideoPlay="handleVideoPlay" />
    <!-- 节目集结束 -->
    <!-- 子集开始 -->
    <series-info :query="query" @handleVideoPlay="handleVideoPlay" />
    <!-- 子集结束 -->
  </span>
  <!-- 视频播放插件开始 -->
  <video-js
          ref="videoPlayRef"
          :videoTitle="videoTitle"
          :videoSrc="videoSrc"
          :videoType="videoType"
          :videoAutoPlay="videoAutoPlay"
          :dialogVisible="videoVisible"
          @cancelVideoJs="cancelVideoJs"
  />
  <!-- 视频播放插件结束 -->
</template>

<script>
  import {ref, nextTick} from 'vue'
  import {useRoute} from 'vue-router'
  import MediaInfo from "./MediaInfo";
  import VideoJs from "@/components/player/VideoJs";
  import {getVideoPlayUrl, mimeTypeList} from "@/utils/usage-config";
  import SeriesInfo from "./SeriesInfo";
  import LiveRoomMedia from "./LiveRoomMedia";

  export default {
    name: "index",
    components: {MediaInfo, VideoJs, SeriesInfo, LiveRoomMedia},
    setup() {
      const route = useRoute()
      const query = route.query
      /** 视频播放参数开始 **/
      const videoVisible = ref(false)
      const videoTitle = ref('')
      const videoSrc = ref('')
      const videoType = ref('')
      const videoAutoPlay = ref(true)
      const videoPlayRef = ref(null)
      /** 视频播放参数结束 **/

      const handleVideoPlay = (row) => {
        videoTitle.value = row.name
        videoVisible.value = true
        videoSrc.value = getVideoPlayUrl(row)
        if (row.mimeid) {
          videoType.value = mimeTypeList[row.mimeid] ? mimeTypeList[row.mimeid] : ''
        } else if (row.mimetype) {
          videoType.value = row.mimetype
        } else {
          videoType.value = 'video/mp4'
        }
        nextTick(() => {
          videoPlayRef.value.init()
        })
      }
      const cancelVideoJs = () => {
        videoVisible.value = false
      }

      return {
        query,
        videoAutoPlay,
        videoVisible,
        videoTitle,
        videoPlayRef,
        videoSrc,
        videoType,
        cancelVideoJs,
        handleVideoPlay
      }
    }
  }
</script>

<style lang="scss">
  .mediatitle{
    margin-top: 10px;
    &:first{
      margin-top: 0;
    }
    display:inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
  }

</style>
